import React, { ReactElement, useContext, useMemo } from 'react';
import { View } from 'react-native';

import styles from './style';
import { Store } from '../../reducer';
import { DOWNLOAD_MANAGE_TITLE, DOWNLOAD_MANAGE_TYPE } from '../../constant';
import NavBar from '../../../../components/NavBar';
import { setEditStatus, backAction } from '../../actions';
import Bottom from '../Bottom';
import WholeManage from '../WholeManage';
import DownloadingManage from '../DownloadingManage';

export default (): ReactElement => {
  const { state } = useContext(Store);
  const { isEdit, type } = state;

  return useMemo(
    (): ReactElement => (
      <View style={styles.container}>
        <NavBar
          title={DOWNLOAD_MANAGE_TITLE[type]}
          backAction={backAction}
          rightText={isEdit ? '取消' : '编辑'}
          rightAction={(): void => {
            setEditStatus(!isEdit);
          }}
          rightStyle={styles.navBarRightText}
        />
        {type === DOWNLOAD_MANAGE_TYPE.All && <WholeManage />}
        {type === DOWNLOAD_MANAGE_TYPE.Ing && <DownloadingManage />}
        <Bottom />
      </View>
    ),
    [isEdit, type]
  );
};
